<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>会员管理 - 小型超市后台管理系统</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/modal.css">
</head>
<body>
    <div class="header">
        <img src="../img/logo.png" class="logo" alt="logo">
        <span class="title">超市管理</span>
        <div class="nav">
            <span>后台管理</span>
            <span class="user">admin</span>
        </div>
    </div>
    <div class="sidebar">
        <ul>
            <li><a href="/page/admin.html">系统主页</a></li>
            <li><a href="/page/purchase.html">进货管理</a></li>
            <li><a href="/page/saleadmin.html">销售管理</a></li>
            <li><a href="/page/stock.html">库存管理</a></li>
            <li class="active"><a href="/page/memberadmin.html">会员管理</a></li>
            <li><a href="/page/stats.html">数据统计</a></li>
            <li><a href="/page/index.html">前台POS</a></li>
        </ul>
    </div>
    <div class="main">
        <main class="main-content">
            <div class="card">
                <div class="card-header">
                    <h4>会员管理</h4>
                    <button id="add-member-btn" class="btn btn-primary">新增会员</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table>
                            <thead>
                                <tr>
                                    <th>卡号</th>
                                    <th>姓名</th>
                                    <th>联系方式</th>
                                    <th>开卡日期</th>
                                    <th>到期日期</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- JS will populate this -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Add Member Modal -->
    <div id="add-member-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>新增会员</h2>
                <span class="close-btn">&times;</span>
            </div>
            <div class="modal-body">
                <form id="add-member-form">
                    <div class="form-group">
                        <label for="member-name">姓名</label>
                        <input type="text" id="member-name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="member-contact">联系方式</label>
                        <input type="text" id="member-contact" name="contact" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="cancel-add-btn" class="btn btn-secondary">取消</button>
                <button id="confirm-add-btn" class="btn btn-primary">确认新增</button>
            </div>
        </div>
    </div>

    <script src="../js/member-admin.js"></script>
</body>
</html> 